<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鼠标悬停和离开</title>
    <script>
        function showMenu(thisa) {
            thisa.style.height = "180px"
        }
        function hideMenu(thisa) {
            thisa.style.height = "30px"
        }
    </script>
</head>

<body>
    <div onmouseover="showMenu(this)" onmouseout="hideMenu(this)"
        style="width: 120px;height: 30px;border: 1px solid blue; overflow: hidden;background:#cccccc;">
        <table>
            <tr>
                <td>下拉菜单</td>
            </tr>
            <tr>
                <td>菜单1</td>
            </tr>
            <tr>
                <td>菜单2</td>
            </tr>
            <tr>
                <td>菜单3</td>
            </tr>
            <tr>
                <td>菜单4</td>
            </tr>
            <tr>
                <td>菜单5</td>
            </tr>
        </table>
    </div>
</body>

</html>